<template>
  <div class="bor">
    <div class="location">
      <div class="btnQuery">
        <el-input v-model="searchVal" placeholder="请输入搜索内容" class="searchWidth">
          <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
        </el-input>
      </div>
      <div class="btnGroups">
        <el-radio-group v-model="radioGroupVal" @change="radioGroupChange">
          <el-tooltip
            v-for="(item, index) in radioGroupList"
            :key="index"
            :content="item.tooltipContent"
            placement="top"
          >
            <el-radio-button :label="item.value">
              <i class="iconfont" :class="item.icon"></i>
            </el-radio-button>
          </el-tooltip>
        </el-radio-group>
      </div>
    </div>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column
        v-for="(item,index) in tableColum"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.minWidth"
        :show-overflow-tooltip="true"
        :default-sort="{prop: 'name'}"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getUsedLocation, getFileUsedLocation } from '@/api/frontPage/public'
export default {
  name: 'Location',
  props: {
    childrenId: {
      type: String,
      default: ''
    },
    search: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: '0'
    }
    // 0代表物料，1代表文档
  },
  data() {
    return {
      searchVal: '',
      loading: false,
      radioGroupVal: '',
      radioGroupList: [
        {
          tooltipContent: '导出',
          value: '01',
          icon: 'iconicon_export'
        }
      ],
      tableColum: [
        {
          prop: 'code',
          label: '编码',
          minWidth: '40'
        },
        {
          prop: 'description',
          label: '描述',
          minWidth: '100'
        },
        {
          prop: 'rev',
          label: '版本',
          minWidth: '50'
        },
        {
          prop: 'count',
          label: '状态',
          minWidth: '50'
        },
        {
          prop: 'unit',
          label: '单位',
          minWidth: '100'
        },
        {
          prop: 'remarks',
          label: '备注',
          minWidth: '100'
        }
      ],
      tableData: [
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      const params = {
        childrenId: this.childrenId,
        search: this.searchVal
      }
      if (this.type === '0') {
        getUsedLocation(params).then(res => {
          this.tableData = res.result
        })
      } else {
        getFileUsedLocation(params).then(res => {
          this.tableData = res.result
        })
      }
    },
    radioGroupChange(val) {
      switch (val) {
        case '01':
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bor {
  border: 1px solid #eff2f7;
  .location {
    display: flex;
    justify-content: space-between;
    .btnGroups {
      margin-right: 12px;
    }
  }
}

.searchWidth {
  width: 240px;
  margin: 17px 15px 16px 12px;
}
.el-radio-button {
  margin: 17px 0px 16px 0px;
  border: none;
  .el-radio-button__inner {
    .iconfont {
      font-size: 12px;
    }
  }

}
</style>
